CSS Grids
CSS Grid is a powerful tool for creating two-dimensional layouts, providing developers with unmatched flexibility and control over web design structures.
What are CSS Grids?
CSS Grids are a layout system that divides a page into rows and columns, allowing for precise placement of items in a grid structure.
Are you ready to level up your web layouts? CSS Grids are a game-changer, giving you the tools to create stunning, responsive designs with ease. Astral.CSS, a modern CSS framework, makes using grids even simpler with prebuilt utility classes for columns, rows, gaps, and more. Whether you're a beginner or a pro, this guide will walk you through mastering CSS Grids with Astral.CSS.
Grid Template Column
| Class | Properties |
|---|---|
grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)); |
grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)); |
grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)); |
grid-cols-5 | grid-template-columns: repeat(5, minmax(0, 1fr)); |
grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)); |
grid-cols-7 | grid-template-columns: repeat(7, minmax(0, 1fr)); |
grid-cols-8 | grid-template-columns: repeat(8, minmax(0, 1fr)); |
grid-cols-9 | grid-template-columns: repeat(9, minmax(0, 1fr)); |
grid-cols-10 | grid-template-columns: repeat(10, minmax(0, 1fr)); |
grid-cols-11 | grid-template-columns: repeat(11, minmax(0, 1fr)); |
grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)); |
grid-cols-none | grid-template-columns: none; |
Want a layout with multiple columns? Astral.CSS makes it simple with classes like grid-cols-1 for a single column or grid-cols-12 for up to 12 columns.
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
Grid Column Start / End
Use this for controlling how elements are sized and placed across grid columns.
1
2
3
4
5
6
7
8
9
| Class | Properties |
|---|---|
col-auto | grid-column: auto; |
col-span-1 | grid-column: span 1 / span 1; |
col-span-2 | grid-column: span 2 / span 2; |
col-span-3 | grid-column: span 3 / span 3; |
col-span-4 | grid-column: span 4 / span 4; |
col-span-5 | grid-column: span 5 / span 5; |
col-span-6 | grid-column: span 6 / span 6; |
col-span-7 | grid-column: span 7 / span 7; |
col-span-8 | grid-column: span 8 / span 8; |
col-span-9 | grid-column: span 9 / span 9; |
col-span-10 | grid-column: span 10 / span 10; |
col-span-11 | grid-column: span 11 / span 11; |
col-span-12 | grid-column: span 12 / span 12; |
col-start-1 | grid-column-start: 1; |
col-start-2 | grid-column-start: 2; |
col-start-3 | grid-column-start: 3; |
col-start-4 | grid-column-start: 4; |
col-start-5 | grid-column-start: 5; |
col-start-6 | grid-column-start: 6; |
col-start-7 | grid-column-start: 7; |
col-start-8 | grid-column-start: 8; |
col-start-9 | grid-column-start: 9; |
col-start-10 | grid-column-start: 10; |
col-start-11 | grid-column-start: 11; |
col-start-12 | grid-column-start: 12; |
col-start-auto | grid-column-start: auto; |
col-end-1 | grid-column-end: 1; |
col-end-2 | grid-column-end: 2; |
col-end-3 | grid-column-end: 3; |
col-end-4 | grid-column-end: 4; |
col-end-5 | grid-column-end: 5; |
col-end-6 | grid-column-end: 6; |
col-end-7 | grid-column-end: 7; |
col-end-8 | grid-column-end: 8; |
col-end-9 | grid-column-end: 9; |
col-end-10 | grid-column-end: 10; |
col-end-11 | grid-column-end: 11; |
col-end-12 | grid-column-end: 12; |
col-end-auto | grid-column-end: auto; |
Spanning column
Use the col-span-{n} utilities to make an element span n columns.
Starting and ending line
Use the col-start-{n} and col-end-{n} utilities to make an element start or end at the nth grid line. These can also be combined with the col-span-{n} utilities to span a specific number of columns.
Note that CSS grid lines start at 1, not 0, so a full-width element in a 6-column grid would start at line 1 and end at line 7.
Grid Template Rows
Use for specifying the rows in a grid layout..
| Class | Properties |
|---|---|
grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr)); |
grid-rows-2 | grid-template-rows: repeat(2, minmax(0, 1fr)); |
grid-rows-3 | grid-template-rows: repeat(3, minmax(0, 1fr)); |
grid-rows-4 | grid-template-rows: repeat(4, minmax(0, 1fr)); |
grid-rows-5 | grid-template-rows: repeat(5, minmax(0, 1fr)); |
grid-rows-6 | grid-template-rows: repeat(6, minmax(0, 1fr)); |
grid-rows-7 | grid-template-rows: repeat(7, minmax(0, 1fr)); |
grid-rows-8 | grid-template-rows: repeat(8, minmax(0, 1fr)); |
grid-rows-9 | grid-template-rows: repeat(9, minmax(0, 1fr)); |
grid-rows-10 | grid-template-rows: repeat(10, minmax(0, 1fr)); |
grid-rows-11 | grid-template-rows: repeat(11, minmax(0, 1fr)); |
grid-rows-12 | grid-template-rows: repeat(12, minmax(0, 1fr)); |
grid-rows-none | grid-template-rows: none; |
Use the grid-rows-{n} utilities to create grids with n equally sized rows.
1
2
3
4
5
6
7
8
9
Spanning row
Use the row-span-{n} utilities to make an element span n rows.
Starting and ending line
Use the row-start-{n} and row-end-{n} utilities to make an element start or end at the nth grid line. These can also be combined with the row-span-{n} utilities to span a specific number of rows.
Note that CSS grid lines start at 1, not 0, so a full-height element in a 3-row grid would start at line 1 and end at line 4.
| Class | Properties |
|---|---|
gap-1 |
gap: .25rem |
gap-2 |
gap: .5rem |
gap-3 |
gap: .7rem |
gap-4 |
gap: 1rem |
gap-5 |
gap: 1.2rem |
gap-6 |
gap: 1.5rem |
Gap
Use gap-{size} to change the gutter size in grid layouts.
Row Gap
Use col-gap-{size} to change the gutter size between columns in grid layouts.
| Class | Properties |
|---|---|
row-gap-1 |
row-gap: .25rem |
row-gap-2 |
row-gap: .5rem |
row-gap-3 |
row-gap: .7rem |
row-gap-4 |
row-gap: 1rem |
row-gap-5 |
row-gap: 1.2rem |
row-gap-6 |
row-gap: 1.5rem |
Column Gap
Use col-gap-{size} to change the gutter size between columns in grid layouts.
| Class | Properties |
|---|---|
col-gap-1 |
column-gap: .25rem |
col-gap-2 |
column-gap: .5rem |
col-gap-3 |
column-gap: .7rem |
col-gap-4 |
column-gap: 1rem |
col-gap-5 |
column-gap: 1.2rem |
col-gap-6 |
column-gap: 1.5rem |
Grid Auto Flow
The grid-auto-flow property controls how the browser places items within a grid container that has not been explicitly placed. By default, the grid system lays out items in rows, but you can change this behavior to flow items in columns or rows based on your design needs.Astral.CSS has some utilities classes you can use to achieve that.
| Class | Properties |
|---|---|
grid-flow-row |
grid-auto-flow: row; |
grid-flow-col |
grid-auto-flow: column; |
grid-flow-row-dense |
grid-auto-flow: row dense; |
grid-flow-row-dense |
grid-auto-flow: row dense; |
grid-flow-col-dense |
grid-auto-flow: column dense; |